<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>修改用户信息</title>
<!-- 引入css -->
<link href="css/bootstrap.min.css" rel="stylesheet" />
<!-- 使用bootstrap前端框架，首先引入jquery -->
<script type="text/javascript" src="js/jquery-3.3.1.js"></script>
<!-- 引入js插件 -->
<script type="text/javascript" src="js/bootstrap.min.js"></script>

<script type="text/javascript">
	$(function(){
		var flag1 = true;
		var flag2 = true;
		var flag3 = false;
		var flag4 = false;
		var flag5 = true;
		var flag6 = true;
		$("#uName").blur(function(){
			var value = $("#uName").val().trim();
			$.ajax({
				type:"post",
				url:"UserServlet",
				data:"method=ajax1&uName="+value,
				success:function(msg){
					if(msg=="false"){
						$("#span1").html("<font color='red' bold>× 此用户名已存在！</font>")
						flag1 = false;
					}else if(msg==""){
						$("#span1").html("<font color='red' bold>× 用户名不能为空！")
						flag1 = false;
					}else if(value.length>=6){
						$("#span1").html("<font color='green' bold>√ 恭喜您，此用户名可以使用</font>")
					}
				}
			});
		});
		
		$("#uName").bind('input propertychange',function(){
			var value = $("#uName").val().trim();
			var reg = /^[a-zA-Z]{1}[a-zA-Z0-9_\u4e00-\u9fa5]{5,17}$/;
			if(!reg.test(value)){
				$("#span1").html("<font color='red'>× 由首字母是字母的6-18位的字母、数字、汉字或下划线(_)组成</font>")
				flag2 = false;
			}else{
				$("#span1").html("<font color='green'>√</font>")
			}
		});
		
		$("#password").blur(function(){
			var pwd = $("#password").val().trim();
			var pwd2 = '${user.password}';
			$.ajax({
				type:"post",
				url:"UserServlet",
				data:"method=ajax2&orgpwd="+pwd,
				success:function(msg){
					if(msg==pwd2){
						$("#span2").html("<font color='green'>√ 密码正确</font>")
						flag3 = true;
					}else{
						$("#span2").html("<font color='red'>× 密码错误</font>")
					}
				}
			});
		});
		$("#password2").bind('input propertychange',function(){
			var value = $("#password2").val().trim();
			//不全为数字、不全为字母、必须是字母或数字
				var reg = /^(?![a-zA-Z]+$)(?![0-9]+$)[0-9a-zA-Z]{6,18}$/;
				if(!reg.test(value)){
					$("#span3").html("<font color='red'>× 由6-18位的字母和数字组成</font>")
				}else{
					$("#span3").html("<font color='green'>√ 格式正确</font>")
					flag4 = true;
				}
		});
		$("#rName").blur(function(){
			var value = $("#rName").val().trim();
			var reg = /^[\u4e00-\u9fa5]{2,4}$/;
			if(!reg.test(value)){
				$("#span4").html("<font color='red'>× 由2-4位的汉字组成</font>")
				flag5=false;
			}else{
				$("#span4").html("<font color='green'>√</font>")
			}
		});
		$("#tel").blur(function(){
			var value = $("#tel").val().trim();
			var reg = /^1(3|4|5|7|8)\d{9}$/;
			if(!reg.test(value)){
				$("#span5").html("<font color='red'>× 此手机号有误！</font>")
				flag6 = false;
			}else{
				$("#span5").html("<font color='green'>√</font>")
			}
		});

		$("#form1").submit(function(){
			var flag = flag1&&flag2&&flag3&&flag4&&flag5&&flag6;
			if(!flag){
				alert("您填写的信息不合法！请重新填写")	
			}
			return flag;
		})
	})
</script>

</head>
<body style="background:url('images/bg5.jpg');background-size:cover;">
	<form action="UserServlet?method=update" method="post" id="form1">
		<input type="hidden" name="uId" value="${user.uId }">
		<table border="1" width="650px"align="center">
			<tr>
				<td colspan="2" align="center">欢迎您前来修改用户信息！</td>
			</tr>
			<tr>
				<td>用户名:</td>
				<td><input name="uName" id="uName" value="${user.uName }"><span id="span1"></span></td>
			</tr>
			<tr>
				<td>原始密码:</td>
				<td><input name="password" id="password"><span id="span2"></span></td>
			</tr>
			<tr>
				<td>新密码:</td>
				<td><input name="password2" id="password2" ><span id="span3"></span></td>
			</tr>
			<tr>
				<td>真实姓名:</td>
				<td><input name="rName" id="rName" value="${user.rName}"><span id="span4"></span></td>
			</tr>
			<tr>
				<td>手机号:</td>
				<td><input name="tel" id="tel" value="${user.tel}"><span id="span5"></span></td>
			</tr>
			<tr>
				<td colspan="2" align="center"><input type="submit" value="确认修改"></td>
			</tr>
			<tr>
				<td colspan="2" align="center"><input type="button" onclick="history.go(-1)" value="返回"></td>
			</tr>
		</table>
	</form>
</body>
</html>